<template>
    <div class="animation-container">
        <div class="animation-box">
            <NameTransition :show="vueShow" :src="vueImgs"></NameTransition>
            <NameTransition :show="viteShow" :src="viteImgs"></NameTransition>
            <NameTransition :show="tauriShow" :src="tauriImgs"></NameTransition>
            <NameTransition :show="rustShow" :src="rustImgs"></NameTransition>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import vueImg from '@/assets/vue.svg'
import viteImg from '@/assets/vite.svg'
import tauriImg from '@/assets/tauri.svg'
import rustImg from '@/assets/rust.svg'

import NameTransition from '../../components/NameTransition.vue';
import { invoke } from '@tauri-apps/api';
const vueShow = ref<boolean>(false)
const viteShow = ref<boolean>(false)
const tauriShow = ref<boolean>(false)
const rustShow = ref<boolean>(false)

const vueImgs = ref<string>(vueImg)
const viteImgs = ref<string>(viteImg)
const tauriImgs = ref<string>(tauriImg)
const rustImgs = ref<string>(rustImg)
const sleep = (c: number, cb: Function) => {
    setTimeout(() => {
        cb()
    }, c * 500)
}
sleep(1, () => {
    vueShow.value = true
})
sleep(2, () => {
    viteShow.value = true
})
sleep(3, () => {
    tauriShow.value = true
})
sleep(4, () => {
    rustShow.value = true
})
sleep(6, () => {
    invoke('close_splashscreen')
})
</script>
<style lang="less" scoped>
.animation-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;

    .animation-box {
        min-width: 210px;
        position: relative;
        display: flex;
        align-items: center;
        height: 360px;
    }
}
</style>